import { defineComponent, SetupContext } from 'vue'
import { buttonProps, ButtonProps, ButtonEmit, buttonEmit } from './button-types'
import useButton from './hooks/use-button'
import { useNamespace } from '../shared/hooks/useNamespace'

export default defineComponent({
  name: 'FsButton',
  props: buttonProps,
  emits: buttonEmit,
  setup(props: ButtonProps, ctx: SetupContext<ButtonEmit>) {
    const { type, isDisabled, rounded, width, height, clickHandle } = useButton(props, ctx)
    const ns = useNamespace('button')
    return () => {
      return (
        <button
          class={[ns.b(), ns.m(type.value), ns.is('disabled', isDisabled.value)]}
          style={{
            borderRadius: `${rounded.value}`,
            width: `${width.value}`,
            height: `${height.value}`,
            lineHeight: `${height.value}`
          }}
          onClick={clickHandle}
        >
          {ctx.slots.default?.()}
        </button>
      )
    }
  }
})
